<!--  -->
<template>
  <div class="choose-articles-system-data">
    <el-divider content-position="right" v-if="quoteSystemType === 2">
      <span class="total-u">选择文章个数：{{this.cQuoteSystemItemIds.length}}
        剩余：{{36 - this.cQuoteSystemItemIds.length}}</span>
    </el-divider>
    <el-row>
      <el-col :span="12">
        <el-form :label-width="'90px'">
          <el-form-item label="选择类型" style="margin-bottom:0px;">
            <el-select @change="changeQuoteSystemType" style="width:160px;" size="mini" v-model="quoteSystemType"
              placeholder="请选择">
              <el-option label="系统、分类选择" :value="1"></el-option>
              <el-option label="文章单个选取" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form v-loading="systemLoading" :label-width="'90px'">
          <el-form-item label="系统页面" style="margin-bottom:0px;">
            <el-select @change="changeSystemId" :disabled="systemList === false" style="width:240px;" size="mini"
              v-model="cPageId" placeholder="请选择">
              <el-option :disabled="true" :label="systemChooseContent" :value="0"></el-option>
              <el-option v-for="(item, index) in systemList" :key="index"
                :label="item.page.name + ' （'+item.system.name+'）'" :value="item.page.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form v-loading="systemCategoryLoading" :label-width="'90px'">
          <el-form-item label="选择分类" style="margin-bottom:0px;">
            <el-select :disabled="systemTypeId === 2" @change="changeSystemCategoryId" style="width:240px;" size="mini"
              v-model="cSystemCategoryId" placeholder="请选择">
              <el-option :disabled="true" :label="'请选择'" :value="-2"></el-option>
              <el-option v-if="systemTypeId === 2" :label="'全部'" :value="-1"></el-option>
              <el-option
                v-if="systemTypeId === 1 && (!systemCategoryList || !systemCategoryList[0] || systemCategoryList[0].length < 1)"
                :label="'全部'" :value="-1"></el-option>
              <el-option
                v-if="systemTypeId === 1 && systemCategoryList && systemCategoryList[0] && systemCategoryList[0].length > 0"
                :label="'全部'" :value="-1">
              </el-option>
              <el-option v-if="systemCategoryList && systemCategoryList[0] && systemCategoryList[0].length > 0"
                :label="'未分类'" :value="0">
              </el-option>
              <template v-for="item in systemCategoryList[0]">
                <el-option :key="item.id" :label="item.name" :value="item.id"></el-option>
                <template v-for="ite in systemCategoryList[item.id]">
                  <el-option style="padding-left:36px;" :key="ite.id" :label="ite.name" :value="ite.id">
                  </el-option>
                  <template v-for="it in systemCategoryList[ite.id]">
                    <el-option style="padding-left: 54px;" :key="it.id" :label="it.name" :value="it.id">
                    </el-option>
                  </template>
                </template>
              </template>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form v-if="quoteSystemType === 1" :label-width="'90px'">
          <el-form-item label="数据总数" style="margin-bottom:0px;">
            <el-select @change="changeTopCount" style="width:160px;" size="mini" v-model="cTotalData" placeholder="请选择">
              <el-option v-for="item in 33" :key="item + 2" :label="item + 2" :value="item + 2">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form v-if="quoteSystemType === 2" :label-width="'90px'" @submit.native.prevent>
          <el-form-item label="文章标题" style="margin-bottom:0px;">
            <div class="name-search">
              <el-input style="width:190px" v-model="name" size="mini" />
              <div>
                <el-button @click="searchItemList" size="mini" type="success">查 询</el-button>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <TablesSystemType1 v-if="systemTypeId === 1 && quoteSystemType === 1"
      :systemItemList="systemItemList" :systemItemLoading="systemItemLoading" />
    <TablesSystemType2 v-if="systemTypeId === 2 && quoteSystemType === 1"
      :systemItemList="systemItemList" :systemItemLoading="systemItemLoading" />
    <TablesSystemType3 v-if="systemTypeId === 1 && quoteSystemType === 2"
      :systemItemList="systemItemList" :systemItemLoading="systemItemLoading" :totalList="systemItemTotal"
      :pageSize="paging.limit" :changePage="changePage" :selectionChange="selectionChange" :cQuoteSystemItemIds="cQuoteSystemItemIds" ref="tablesSystemType3" />
    <TablesSystemType4 v-if="systemTypeId === 2 && quoteSystemType === 2"
      :systemItemList="systemItemList" :systemItemLoading="systemItemLoading" :totalList="systemItemTotal"
      :pageSize="paging.limit" :changePage="changePage" :selectionChange="selectionChange" :cQuoteSystemItemIds="cQuoteSystemItemIds" ref="tablesSystemType4" />
  </div>
</template>

<script>
import TablesSystemType1 from '@/components/common/design/dialog/component/articles/TablesSystemType1.vue'
import TablesSystemType2 from '@/components/common/design/dialog/component/articles/TablesSystemType2.vue'
import TablesSystemType3 from '@/components/common/design/dialog/component/articles/TablesSystemType3.vue'
import TablesSystemType4 from '@/components/common/design/dialog/component/articles/TablesSystemType4.vue'
import { mapState } from 'vuex'
import _ from 'lodash'

export default {
  props: {
    quoteSystem: {
      type: Object
    },
    totalData: {
      type: Number
    },
    changeQuoteSystemInput: {
      type: Function
    }
  },
  computed: {
    ...mapState([
      'design'
    ]),
    cSystemId () {
      let systemPage = this.getSystemPage()
      if (systemPage && systemPage.system) {
        return systemPage.system.id
      }
      return -1
    },
    systemChooseContent () {
      return '请选择'
    },
    systemCategoryChooseContent () {
      return '请选择'
    },
    systemTypeId () {
      let systemPage = this.getSystemPage()
      if (systemPage && systemPage.system) {
        return systemPage.system.systemTypeId
      }
      return -1
    }
  },
  data () {
    return {
      // 选取的数据的类型
      quoteSystemType: 0,
      // 选择的当前系统页面的 pageId
      cPageId: 0,
      // 获取系统时  v-loading
      systemLoading: false,
      // 获取产品系统页面的数据
      systemList: [],
      // 数据总数
      cTotalData: -1,
      // 系统分类获取时 v-loading
      systemCategoryLoading: false,
      // 系统分类列表数据
      systemCategoryList: [],
      // 当前选择的系统分类
      cSystemCategoryId: -2,
      // 系统产品数据获取时 v-loading
      systemItemLoading: false,
      // 获取到数据的总数
      systemItemTotal: 0,
      // 系统产品链表
      systemItemList: [],
      // 查询的产品名字
      name: '',
      // 分页
      paging: {
        page: 1,
        limit: 12
      },
      // ids
      cQuoteSystemItemIds: [],
      // ids对应的数据
      cQuoteSystemItemIdsDataList: [],
      // 作用于显示input内容中
      inputSystemName: ''
    }
  },
  watch: {
    inputSystemName: {
      handler () {
        this.changeQuoteSystemInput([this.inputSystemName])
      },
      deep: true
    }
  },
  methods: {
    open () {
      this.quoteSystemType = this.$props.quoteSystem.type
      this.cTotalData = this.$props.quoteSystem.topCount && this.$props.quoteSystem.topCount > 2 && this.$props.quoteSystem.topCount < 36 ? this.$props.quoteSystem.topCount : 3
      this.cQuoteSystemItemIds = this.$props.quoteSystem.quoteSystemItemIds ? JSON.parse(this.$props.quoteSystem.quoteSystemItemIds) : []

      // 请求获取系统页面数据
      this.systemLoading = true
      this.$jpost('/page/infos-with-system-by-types', [1, 2]).then(response => {
        this.systemLoading = false
        if (response && response.length > 0) {
          this.systemList = response
          this.cPageId = parseInt(this.$props.quoteSystem.quotePageId) > 0 ? parseInt(this.$props.quoteSystem.quotePageId) : 0
        } else {
          this.systemList = 0
        }
        // 如果系统页面id 大于0获取分类id
        if (this.cPageId > 0) {
          this.getSystemCategoryList(() => {
            this.cSystemCategoryId = this.$props.quoteSystem.quoteSystemCategoryId
            this.getArticleList(() => {
              if (this.quoteSystemType === 2) {
                if (this.cQuoteSystemItemIds && this.cQuoteSystemItemIds.length > 0) {
                  this.systemItemLoading = true
                  this.$jpost('/system/article/infos-by-system-id-and-ids', { ids: this.cQuoteSystemItemIds, systemId: this.cSystemId }).then(response => {
                    this.systemItemLoading = false
                    if (response && response.length > 0) {
                      if (response.length === this.cQuoteSystemItemIds.length) {
                        this.cQuoteSystemItemIdsDataList = response
                      } else {
                        this.cQuoteSystemItemIdsDataList = response
                        this.cQuoteSystemItemIds = response.map(element => {
                          return parseInt(element.sarticle.id)
                        })
                      }
                    } else {
                      this.cQuoteSystemItemIdsDataList = []
                      this.cQuoteSystemItemIds = []
                    }
                    this.$nextTick(() => {
                      this.renderTableSelect()
                    })
                  })
                } else {
                  this.cQuoteSystemItemIdsDataList = []
                  this.cQuoteSystemItemIds = []
                }
              }
            })
          })
          let systemPage
          if (this.systemList && this.systemList.length > 0) {
            systemPage = this.systemList.find(ele => {
              return parseInt(ele.system.id) === this.cSystemId
            })
          }

          if (systemPage) {
            this.inputSystemName = '系统：' + systemPage.page.name + '（' + systemPage.system.name + '）'
            this.changeQuoteSystemInput([this.inputSystemName])
          }
        }
      })
    },
    close () {
      this.quoteSystemType = 0
      this.cPageId = 0
      this.systemLoading = false
      this.systemList = []
      this.cTotalData = -1
      this.systemCategoryLoading = false
      this.systemCategoryList = []
      this.cSystemCategoryId = -2
      this.systemItemLoading = false
      this.systemItemTotal = 0
      this.systemItemList = []
      this.name = ''
      this.paging = {
        page: 1,
        limit: 12
      }
      this.cQuoteSystemItemIds = []
      this.cQuoteSystemItemIdsDataList = []
      this.inputSystemName = ''
    },
    changeSystemId (value) {
      if (value < 1) {
        return
      }
      let systemPage = this.getSystemPage()
      if (systemPage) {
        this.inputSystemName = '系统：' + systemPage.page.name + '（' + systemPage.system.name + '）'
      }
      if (this.quoteSystemType === 2) {
        this.cQuoteSystemItemIdsDataList = []
        this.cQuoteSystemItemIds = []
      }
      if (parseInt(systemPage.system.systemTypeId) === 2) {
        this.cSystemCategoryId = -1
        this.paging.page = 1
        this.getArticleList()
      } else {
        // 请求获取数据
        this.getSystemCategoryList(() => {
          // if (this.systemCategoryList && this.systemCategoryList[0] && this.systemCategoryList[0].length > 0) {
          //   this.cSystemCategoryId = -1
          //   this.paging.page = 1
          //   this.getArticleList()
          // } else {
          //   this.cSystemCategoryId = -2
          // }
          this.cSystemCategoryId = -1
          this.paging.page = 1
          this.getArticleList()
        })
      }
    },
    changeSystemCategoryId (value) {
      if (value < -1) {
        return
      }
      this.paging.page = 1
      this.getArticleList()
    },
    changeQuoteSystemType (value) {
      if (this.cSystemCategoryId < -1) {
        return
      }
      if (this.cPageId < 1) {
        return
      }
      this.paging.page = 1
      this.name = ''
      this.getArticleList(() => {
        if (this.quoteSystemType === 2) {
          if (this.cQuoteSystemItemIds && this.cQuoteSystemItemIds.length > 0) {
            this.systemItemLoading = true
            this.$jpost('/system/article/infos-by-system-id-and-ids', { ids: this.cQuoteSystemItemIds, systemId: this.cSystemId }).then(response => {
              this.systemItemLoading = false
              if (response && response.length > 0) {
                if (response.length === this.cQuoteSystemItemIds.length) {
                  this.cQuoteSystemItemIdsDataList = response
                } else {
                  this.cQuoteSystemItemIdsDataList = response
                  this.cQuoteSystemItemIds = response.map(element => {
                    return parseInt(element.sarticle.id)
                  })
                }
              } else {
                this.cQuoteSystemItemIdsDataList = []
                this.cQuoteSystemItemIds = []
              }
              this.$nextTick(() => {
                this.renderTableSelect()
              })
            })
          } else {
            this.cQuoteSystemItemIdsDataList = []
            this.cQuoteSystemItemIds = []
          }
        }
      })
    },
    changeTopCount (value) {
      if (this.cSystemCategoryId < -1) {
        return
      }
      if (this.cPageId < 1) {
        return
      }
      this.getArticleList()
    },
    changePage (page) {
      this.paging.page = page
      this.getArticleList()
    },
    selectionChange (row, bool) {
      if (bool) {
        // 增加
        if (this.cQuoteSystemItemIds && this.cQuoteSystemItemIds.length >= 36) {
          this.$message.error('选择文章数量不能超过36个')
        } else {
          this.cQuoteSystemItemIds.push(parseInt(row.sarticle.id))
          this.cQuoteSystemItemIdsDataList.push(row)
        }
      } else {
        // 去除
        let index = this.cQuoteSystemItemIds.findIndex(element => {
          return parseInt(element) === parseInt(row.sarticle.id)
        })
        if (index > -1) {
          this.cQuoteSystemItemIds.splice(index, 1)
        }
        let rindex = this.cQuoteSystemItemIdsDataList.findIndex(element => {
          return parseInt(element.sarticle.id) === parseInt(row.sarticle.id)
        })
        if (rindex > -1) {
          this.cQuoteSystemItemIdsDataList.splice(rindex, 1)
        }
      }
      // 渲染
      this.renderTableSelect()
    },
    renderTableSelect () {
      if (this.systemItemList && this.systemItemList.length > 0) {
        if (this.cQuoteSystemItemIds && this.cQuoteSystemItemIds.length > 0) {
          let rows = this.systemItemList.filter(element => {
            let index = this.cQuoteSystemItemIds.findIndex(ele => {
              return parseInt(element.sarticle.id) === parseInt(ele)
            })
            return index > -1
          })

          if (rows && rows.length > 0) {
            if (this.quoteSystemType === 2) {
              if (this.systemTypeId === 1) {
                this.$nextTick(() => {
                  this.$refs['tablesSystemType3'].tableSelection(rows)
                })
              } else {
                this.$nextTick(() => {
                  this.$refs['tablesSystemType4'].tableSelection(rows)
                })
              }
            }
          }
        }
      }
    },
    searchItemList () {
      this.paging.page = 1
      this.getArticleList()
    },
    getSystemPage () {
      if (!this.systemList || this.systemList.length < 1) {
        return null
      }
      let systemPage = this.systemList.find(ele => {
        return parseInt(ele.page.id) === parseInt(this.cPageId)
      })
      return systemPage
    },
    getSystemCategoryList (callback) {
      // 获取系统分类列表
      this.systemCategoryLoading = true
      this.systemCategoryList = []
      this.$post('/category/table-data-infos-by-system-id', { systemId: this.cSystemId }).then(response => {
        this.systemCategoryLoading = false
        if (response && response.total && response.total > 0) {
          this.systemCategoryList = response.categories
        } else {
          this.systemCategoryList = []
        }
        if (typeof callback === 'function') {
          callback()
        }
      })
    },
    getArticleList (callback) {
      let param
      if (this.quoteSystemType === 1) {
        param = {
          systemId: this.cSystemId,
          categoryId: this.cSystemCategoryId,
          name: '',
          page: 1,
          limit: this.cTotalData
        }
      } else if (this.quoteSystemType === 2) {
        param = {
          systemId: this.cSystemId,
          categoryId: this.cSystemCategoryId,
          name: this.name,
          page: this.paging.page,
          limit: this.paging.limit
        }
      }
      this.systemItemLoading = true
      this.$post('/system/article/infos-by-system-category-id-and-page-limit', param).then(response => {
        this.systemItemLoading = false
        if (response && response.total > 0) {
          this.systemItemList = response.list
          this.systemItemTotal = response.total
        } else {
          this.systemItemList = []
          this.systemItemTotal = 0
        }
        if (typeof callback === 'function') {
          callback()
        }
        this.renderTableSelect()
      })
    },
    getQuoteSystem () {
      let cTotalData = this.quoteSystemType === 2 ? this.cQuoteSystemItemIds.length : this.cTotalData
      let quoteSystem = {
        type: this.quoteSystemType,
        quotePageId: this.cPageId,
        quoteSystemId: this.cSystemId,
        quoteSystemCategoryId: this.cSystemCategoryId,
        topCount: cTotalData,
        quoteSystemItemIds: JSON.stringify(this.cQuoteSystemItemIds),
        remark: ''
      }
      return _.cloneDeep(quoteSystem)
    },
    getSystemItemList () {
      if (this.quoteSystemType === 1) {
        return _.cloneDeep(this.systemItemList)
      } else if (this.quoteSystemType === 2) {
        return _.cloneDeep(this.cQuoteSystemItemIdsDataList)
      }
    }
  },
  components: {
    TablesSystemType1,
    TablesSystemType2,
    TablesSystemType3,
    TablesSystemType4
  }
}

</script>

<style scoped lang="scss">
.choose-articles-system-data {
  .name-search {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
  }

  .total-u {
    color:#888;
    font-size:13px;
  }
}
</style>
